<template>
  <div class="login-record p-4 flex flex-col">
    <div class="w-full flex-1">
      <el-table
        v-loading="loading"
        :data="tableData"
        class="basic-table"
        :tooltip-options="{ popperClass: 'basic-tooltip' }"
        height="100%"
      >
        <template #empty><TableEmpty /></template>
        <el-table-column
          prop="login_at"
          label="登录时间"
          width="280"
          :formatter="emptyFormatterUnix"
        />
        <el-table-column
          prop="login_ip"
          label="登录IP"
          min-width="150"
          show-overflow-tooltip
          :formatter="emptyFormatter"
        />
        <el-table-column
          prop="login_addr"
          label="所在地"
          min-width="200"
          show-overflow-tooltip
          :formatter="emptyFormatter"
        />
        <el-table-column
          prop="system_info"
          label="系统版本"
          min-width="200"
          show-overflow-tooltip
          :formatter="emptyFormatter"
        />
        <el-table-column
          label="浏览器版本"
          min-width="200"
          prop="browser_info"
          show-overflow-tooltip
          :formatter="emptyFormatter"
        />
      </el-table>
    </div>
    <div class="p-4">
      <basic-pagination
        :pagination="pagination"
        @change="getList()"
      ></basic-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { UserModel } from '@/apis/model/user'
import { useListRequest } from '@/hooks/useListRequest'

interface IProps {
  user: UserModel
}

const props = defineProps<IProps>()

const {
  data: tableData,
  getList,
  pagination,
  loading
} = useListRequest(userLoginRecordListApi, {
  user_id: props.user.id
})

onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss"></style>
